﻿
/// <reference path="Component.js" />
/// <reference path="_namespace.js" />
/// <reference path="../events/EventRouter.js" />
/// <reference path="MenuItemDisplayFlags.js" />

/*****************************************************************************
Ajax library class definition. Kevin Robinson 2006.
Class: ajax.components.MenuItem
/*****************************************************************************/


ajax.lang.addNamespace("ajax.components");
$imports("ajax.components.MenuItemDisplayFlags");

//-----------------------------------------------------------------------------
ajax.components.MenuItem = function(doc, sHtml, sImage, sKey, oTag, displayFlags, checked) // Constructor
{     
    ajax.components.MenuItem.superConstructor.call(this, doc);
       
    var flags = ajax.components.MenuItemDisplayFlags;
    
    // Public members
    this.displayFlags       = (typeof(displayFlags) == "undefined")? flags.Text | flags.Image : displayFlags;    
    this.checked            = (typeof(checked) != "undefined" && checked != false)? true : false;
    this.checkEnabled       = true;
    this.checkbox           = null;  // We store a handle to our checkbox. 
    this.enabled            = true;
    this.menuItemContainer  = null;  // A handle to the object (MenuItemContainer) we belong to
    this.element            = null;  // A handle to the DOC DOM element that represents us
    // Public events - provide an event router that clients can subscibe to
    this.getEvent(this.window, "onSelected");
    this.getEvent(this.window, "onMouseOver");
    this.getEvent(this.window, "onMouseOut");
    this.getEvent(this.window, "onCreated");
    this.textPadding        = "    ";
    this.html               = sHtml;
    this.image              = (typeof(sImage) != "undefined" && sImage != "") ? sImage : ajax.getDomainPath() + "/images/blank.gif";    
    this.key                = sKey;
    this.tag                = oTag;
    this.displayHorizontal  = false;
    
    
    var self            = this;
    
    this.itemStyle      = 
    {
        
        cursor: "default",
        fontFamily: "Arial",
        fontSize: "12px",        
        borderWidth: "2px",
        borderStyle:"none",
        padding: "3px"
    };

    this.enabledStyle   =
    {
        color: "#000000"
    };
    this.disabledStyle   = 
    {
        color: "#999999"
    };
    this.outStyle       = 
    {
        borderWidth: "2px",
        borderStyle:"none",
        padding: "3px",
        backgroundColor: "",
        borderColor: ""
    };
    this.overStyle      = 
    {
        borderWidth: "1px",
        backgroundColor: "#C1D2EE",
        borderColor: "#316AC5",
        padding: "2px",
        borderStyle: "solid"
    };
    this.imageStyle     =
    { 
        width           : "16px",
        height          : "16px",
	    borderWidth     : "1px",
        verticalAlign   : "middle",
        // 
        borderColor: "",
        borderStyle: "none",
        backgroundColor: ""  
    };
    this.checkStyle     =
    {
        borderColor: this.overStyle.borderColor,
        borderStyle: this.overStyle.borderStyle,
        backgroundColor: this.overStyle.backgroundColor,
        width: "16px",
        height: "16px",
        verticalAlign: "middle",
        borderWidth: "1px"
    };
    
    this.onDivClick = function(args)
    {
        // Update the checked status
        if (self.checkEnabled)
            self.setChecked(!self.checked);
        
        // call our own "onSelected" event, with "this" as context, passing through the event args
        self.onSelected.call(self, args);
    };
    this.onDivOut = function(args)
    {
        self.copyProperties(this.style, self.outStyle);
        self.onMouseOut.call(this, args);
    };
    this.onDivOver = function(args)
    {
        self.copyProperties(this.style, self.overStyle);        
        self.onMouseOver.call(this, args);
    };
    
    this.create();
               
};

//-----------------------------------------------------------------------------
// Inherits from the base
ajax.lang.extend("ajax.components.MenuItem", "ajax.components.Component");
if ($getDesignMode())
    ajax.components.MenuItem.prototype = ajax.components.Component.prototype;
    
// Methods
//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.add_selected       = function(handler) { return this.getEvent(this.getWindow(), "onSelected").addListener(handler); };
ajax.components.MenuItem.prototype.remove_selected    = function(handler) { return this.getEvent(this.getWindow(), "onSelected").removeListener(handler); }; 
ajax.components.MenuItem.prototype.add_mouseOver      = function(handler) { return this.getEvent(this.getWindow(), "onMouseOver").addListener(handler); };
ajax.components.MenuItem.prototype.remove_mouseOver   = function(handler) { return this.getEvent(this.getWindow(), "onMouseOver").removeListener(handler); };
ajax.components.MenuItem.prototype.add_mouseOut       = function(handler) { return this.getEvent(this.getWindow(), "onMouseOut").addListener(handler); };
ajax.components.MenuItem.prototype.remove_mouseOut    = function(handler) { return this.getEvent(this.getWindow(), "onMouseOut").removeListener(handler); };
ajax.components.MenuItem.prototype.add_created        = function(handler) { return this.getEvent(this.getWindow(), "onCreated").addListener(handler); };
ajax.components.MenuItem.prototype.remove_created     = function(handler) { return this.getEvent(this.getWindow(), "onCreated").removeListener(handler); };

ajax.components.MenuItem.prototype.setDisplayHorizontal = function(val, width)
{
    this.displayHorizontal = val;
    if (val)
    {
        // modify the menu Item to have a particular width and to float
        this.element.style.width        = width + "px";        
        this.element.style.styleFloat   = "left";   // ie
        this.element.style.cssFloat     = "left";   // ff
    }
    else
    {
        this.element.style.width        = "";        
        this.element.style.styleFloat   = "";   // ie        
        this.element.style.cssFloat     = "";   // ff
    }
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.getEnabled     = function()
{
    return this.enabled;
};

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.setEnabled = function(val)
{
    this.enabled = val;
    if (!this.element)
        return;
        
    // Callback function used when user clicks the div
    
    if (this.enabled)
    {
        var self = this;
        var div = this.element;
        
        // Style for enabled
        this.copyProperties(div.style, this.enabledStyle);
        
        // Add the events
        ajax.lang.getEvent(this.window, div, "onselectstart").addListener(function(e){ return false;});
        ajax.lang.getEvent(this.window, div, "onmouseover").addListener(this.onDivOver);
        ajax.lang.getEvent(this.window, div, "onmouseout").addListener(this.onDivOut);
        ajax.lang.getEvent(this.window, div, "onclick").addListener(this.onDivClick);
    }
    else
    {
        var div = this.element;

        // Style for disabled
        this.copyProperties(div.style, this.disabledStyle);
        
        // We keep the Mouseover/out butremove the onclick, and grey the text.    
        ajax.lang.getEvent(window, div, "onclick").removeListener(this.onDivClick);
    }
} 

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.dispose = function()
{
    if (this.menu != null)
        this.menu.removeMenuItem(this);
        
    if (this.element != null && this.element.parentNode != null)
        // Remove from the gui
        this.element.parentNode.removeChild(this.element);
};

//-----------------------------------------------------------------------------
// createDiv
ajax.components.MenuItem.prototype.create = function()
{  

    this.dispose();
    
    // Create the visual Representation of this menu item
    var div         = null;
    if (this.html != "-")
    {
        // Create the div
        div             = this.doc.createElement("div");
        // Store the controller (this) in the View
        div.menuItem    = this;        
        // Store the View in the Controller
        this.element = div;    
        
        // Style the div
        this.copyProperties(div.style, this.itemStyle);
        
        // Create the icon
        var img                 = this.doc.createElement("img");
        img.src                 = this.image;
        this.copyProperties(img.style, this.imageStyle);
        
        // Create the checkbox
        this.checkbox           = this.doc.createElement("img");
        this.setCheckEnabled(this.checkEnabled);
        this.setChecked(this.checked);
        
        // Create the text
        var txt                 = this.doc.createTextNode(this.textPadding + this.html);
        
        // Create the spacers, one for each display Option
        var spc                 = this.doc.createTextNode("  ");
        var spc2                = this.doc.createTextNode("  ");        
        
        var displayFlags = ajax.components.MenuItemDisplayFlags;
        
        if ( (this.displayFlags & displayFlags.Checkbox) == displayFlags.Checkbox)
        {
            div.appendChild(spc);
            // Attach the checkbox to the div
            div.appendChild(this.checkbox);            
        }
                    
        // Append the image
        if ( (this.displayFlags & displayFlags.Image) == displayFlags.Image)
        {
            div.appendChild(spc2);    
            // Attach the image to the div
            div.appendChild(img);                        
        }
                
        if ( (this.displayFlags & displayFlags.Text) == displayFlags.Text)
        {            
            // Attach the text to the div
            div.appendChild(txt);
        }
        
        // Finally either enable or disable the item
        if (this.getEnabled())
            this.setEnabled(true);         
        else
            this.setEnabled(false);
    }
    else
    {
        div = this.doc.createElement("hr");
        div.menuItem = this;
        this.element = div;        
    }      
    
    // Add to the menu if we are already attached to one
    if (this.menu != null)
        this.menu.addMenuItem(this);
        
   // raise the "onCreated" event
   this.onCreated.call(this, div);                
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.getChecked = function()
{
    return this.checked;
}
//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.setChecked = function(val)
{
    this.checked = val;
    if (this.checked)
        this.checkbox.src = ajax.getDomainPath() + "/images/menuitem_tick.gif";
    else
        this.checkbox.src = ajax.getDomainPath() + "/images/blank.gif";
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.setCheckEnabled = function(val)
{
    this.checkEnabled = val;
    // Style the textbox
    if (val)
    {
        this.copyProperties(this.checkbox.style, this.checkStyle);
    }
    else
    {
        // If it's not enabled then set to false
        this.setChecked(false);
        // style as normal image
        this.copyProperties(this.checkbox.style, this.imageStyle);
    }    
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.toString = function()
{
    return "ajax.components.MenuItem";
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.prototype.toClassName = function()
{
    return ajax.lang.getClassName("ajax.components.MenuItem");
}

//-----------------------------------------------------------------------------
ajax.components.MenuItem.cast = function(obj)
{///<returns type="ajax.components.MenuItem"/>
    return obj
}

